<template>
  <div class="notice__item-body">
    <div class="notice__item--avatar" v-if="data.sender">
      <Open-browser :href="data.sender.html_url">
        <img 
          v-if="hasAvatar(data.sender.avatar_url)"
          :src="data.sender.avatar_url" 
          :alt="data.sender.name"
          class="notice__item--avatar-image"
          :height="avatarSize"
          :width="avatarSize"
        >
        <Avatar v-else :username="data.sender.name" :size="avatarSize"/>
      </Open-browser>
    </div>
    <div class="user-message--content">
      <div class="notice__item--message">
        <Open-browser class="notice__item--username" :href="data.sender.html_url">{{ data.sender.name }}</Open-browser>
        <div class="notice__item--body">
          <Open-browser class="user-message__link" :href="data.html_url">{{ data.content | linkFilter }}</Open-browser>
          <label  
            v-if="data.unread" 
            class="label notice__read-buton"
            title="设置为已读"
            @click="onClickUnread(data)">
            未读
          </label>
        </div>
      </div>
      <timeago :datetime="data.updated_at" class="notice__item--datetime"/>
    </div>
  </div>
</template>
<script>
import { hasAvatar, noticeNamespaceTypeText } from '@/utils'
import Avatar from 'vue-avatar'
export default {
  components: { Avatar },
  props: {
    data: {
      required: true
    },
    avatarSize: {
      default: 30
    },
    type: {
      required: true
    }
  },
  methods: {
    hasAvatar,
    noticeNamespaceTypeText,
    onClickUnread (notice) {
      this.$store.dispatch('setUserMessageRead', { id: notice.id })
    }
  }
}
</script>
